<template>
  <div class="page">
    <div class="head">
      <h1>商品详情</h1>
    </div>
    <div class="panel">
    <div class="slide">  
    <div class="slideshow">  
      <ul>
      <transition-group tag="ul" name="image">  
        <li v-for="(img, index) in imgArray" v-show="index===mark" :key="index">  
          <a href="#">  
            <img :src='img'>  
          </a>  
        </li> 
        </transition-group>  
      </ul>  
    </div> 
    </div> 
    <div>
        <span>价格：￥16.80</span>
        <h3>女士内裤</h3>      
    </div>
    <div>
        <h1>图文详情</h1> 
    </div>
    <ul>
      <li><img src="http://cbu01.alicdn.com/img/ibank/2017/787/598/4430895787_909462667.jpg" /></li>
      <li><img src="http://cbu01.alicdn.com/img/ibank/2017/787/598/4430895787_909462667.jpg" /></li>
      <li><img src="http://cbu01.alicdn.com/img/ibank/2017/787/598/4430895787_909462667.jpg" /></li>
      <li><img src="http://cbu01.alicdn.com/img/ibank/2017/787/598/4430895787_909462667.jpg" /></li>
      <li><img src="http://cbu01.alicdn.com/img/ibank/2017/787/598/4430895787_909462667.jpg" /></li>
    </ul>
    </div>
  </div>
</template>
<script>
  export default{
    data(){
      return {
      imgArray: [  
        '/static/timg3.jpg',  
        '/static/timg3.jpg',  
        '/static/timg3.jpg',  
        '/static/timg3.jpg'  
      ],
      mark: 0, //比对图片索引的变量 
      }
    },
    computed: {
      amount() {
        return (this.params.price * this.params.num).toFixed(2)
      }
    },
    beforeDestroy() {
      
    },
    created () {  
    this.play()

  },
    methods: {
      autoPlay () {  
      this.mark++;  
      if (this.mark === 4) { //当遍历到最后一张图片置零  
        this.mark = 0  
      }  
    },
    play () {  
      setInterval(this.autoPlay, 2500)  
    },
    change (i) {  
      this.mark = i  
    },
    stop () {  
      clearInterval(this.timer)  
    },  
    move () {  
      this.timer = setInterval(this.autoPlay, 2500)  
    },  
      changeType(type) {
        this.params.tType = type
      },
    }

  }


  
</script>

<style lang="scss" scoped>
   .slide {  
    width: 100%;  
    height: 207px;  
    margin: 0 auto;  
    overflow: hidden;  
    position: relative;  
  }  
  .slideshow {  
    width: 100%;  
    height: 207px;   
  }  
  li {  
    position: absolute;  
  }  
  img {  
    width: 100%;  
    height: 207px;   
  }  
  .bar {  
    position: absolute;  
    width: 100%;  
    bottom: 10px;  
    margin: 0 auto;  
    z-index: 10;  
    text-align: center;  
  }  
  .bar span {  
    width: 20px;  
    height: 5px;  
    border: 1px solid;  
    background: white;  
    display: inline-block;  
    margin-right: 10px;  
  }  
  .active {  
    background: red !important;  
  }
  .image-enter-active {  
    transform: translateX(0);  
    transition: all 1.5s ease;  
  }  
  .image-leave-active {  
    transform: translateX(-100%);  
    transition: all 1.5s ease;  
  }  
  .image-enter {  
    transform: translateX(100%);  
  }  
  .image-leave {  
    transform: translateX(0);  
  }
  .loadmore {
    min-height: 100vh;
    width: 100%;
    padding-top: 0.8rem;
  }
</style>
